<!-- 问答基本信息卡片 -->
<div class="card">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 32px 24px;">
        <div style="display: flex; justify-content: space-between; align-items: flex-start;">
            <div style="flex: 1;">
                <h1 style="font-size: 28px; font-weight: 600; margin: 0 0 16px 0; color: white;">
                    问答详情
                </h1>
                <div style="display: flex; gap: 12px; flex-wrap: wrap;">
                    <span class="tag" style="background: rgba(255,255,255,0.2); color: white; font-size: 14px;">
                        <%= getStatusText(question.status) %>
                    </span>
                    <% if (question.rating) { %>
                        <span class="tag" style="background: rgba(255,255,255,0.2); color: white; font-size: 14px;">
                            <%= getRatingText(question.rating) %>
                        </span>
                    <% } %>
                </div>
            </div>
            <div style="text-align: right;">
                <p style="font-size: 14px; color: rgba(255, 255, 255, 0.7); margin: 0 0 4px 0;">提问时间</p>
                <p style="font-size: 16px; font-weight: 600; color: white; margin: 0;">
                    <%= new Date(question.created_at).toLocaleString('zh-CN') %>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- 专家信息 -->
<% if (question.expert) { %>
<div class="card">
    <div class="card-header">
        <h2 class="card-title">咨询专家</h2>
    </div>
    <div class="card-content">
        <div style="display: flex; gap: 16px; align-items: flex-start;">
            <div style="flex-shrink: 0;">
                <% if (question.expert.avatar_url) { %>
                    <img src="<%= question.expert.avatar_url %>" alt="<%= question.expert.nickname %>" class="avatar">
                <% } else { %>
                    <div class="avatar" style="background: #667eea; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 600; color: white;">
                        <%= question.expert.nickname ? question.expert.nickname.charAt(0) : '?' %>
                    </div>
                <% } %>
            </div>
            <div style="flex: 1;">
                <h3 style="font-size: 20px; font-weight: 600; margin: 0 0 8px 0; color: #333;">
                    <%= question.expert.nickname %>
                </h3>
                <p style="font-size: 14px; color: #666; margin: 0 0 8px 0;">
                    <%= question.expert.domain ? question.expert.domain.name : '未知领域' %>
                </p>
                <% if (question.expert.bio) { %>
                    <p style="font-size: 14px; color: #666; margin: 0; line-height: 1.5;">
                        <%= question.expert.bio %>
                    </p>
                <% } %>
            </div>
        </div>
    </div>
</div>
<% } %>

<!-- 用户信息 -->
<% if (question.user) { %>
<div class="card">
    <div class="card-header">
        <h2 class="card-title">提问用户</h2>
    </div>
    <div class="card-content">
        <table style="width: 100%; border-collapse: collapse;">
            <tr style="border-bottom: 1px solid #f0f0f0;">
                <td style="padding: 12px 0; font-weight: 600; color: #666; width: 120px;">用户手机号</td>
                <td style="padding: 12px 0; color: #333;"><%= question.user.phone %></td>
            </tr>
            <tr>
                <td style="padding: 12px 0; font-weight: 600; color: #666;">用户昵称</td>
                <td style="padding: 12px 0; color: #333;"><%= question.user.nickname || '未设置' %></td>
            </tr>
        </table>
    </div>
</div>
<% } %>

<!-- 前置条件 -->
<% if (question.preconditions && Object.keys(question.preconditions).length > 0) { %>
<div class="card">
    <div class="card-header">
        <h2 class="card-title">前置条件</h2>
    </div>
    <div class="card-content">
        <div style="background: #f8f9fa; border-radius: 8px; padding: 16px;">
            <pre style="margin: 0; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 14px; line-height: 1.5; color: #333; white-space: pre-wrap; word-break: break-word;"><%= JSON.stringify(question.preconditions, null, 2) %></pre>
        </div>
    </div>
</div>
<% } %>

<!-- 问题内容 -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">用户问题</h2>
    </div>
    <div class="card-content">
        <div class="text-content">
            <p><%= question.question %></p>
        </div>
    </div>
</div>

<!-- 回答内容 -->
<% if (question.answer) { %>
<div class="card">
    <div class="card-header">
        <h2 class="card-title">专家回答</h2>
    </div>
    <div class="card-content">
        <div class="text-content" style="border-left-color: #28a745;">
            <p><%= question.answer %></p>
        </div>
    </div>
</div>
<% } %>

<!-- 错误信息 -->
<% if (question.error_message) { %>
<div class="card">
    <div class="card-header">
        <h2 class="card-title" style="color: #dc3545;">错误信息</h2>
    </div>
    <div class="card-content">
        <div class="error-content">
            <p><%= question.error_message %></p>
        </div>
    </div>
</div>
<% } %>

<!-- 技术信息 -->
<div class="card">
    <div class="card-header">
        <h2 class="card-title">技术信息</h2>
    </div>
    <div class="card-content">
        <table style="width: 100%; border-collapse: collapse;">
            <tr style="border-bottom: 1px solid #f0f0f0;">
                <td style="padding: 12px 0; font-weight: 600; color: #666; width: 120px;">问答ID</td>
                <td style="padding: 12px 0; color: #333;"><%= question.id %></td>
            </tr>
            <tr style="border-bottom: 1px solid #f0f0f0;">
                <td style="padding: 12px 0; font-weight: 600; color: #666;">AI请求ID</td>
                <td style="padding: 12px 0; color: #333;"><%= question.ai_request_id || '未设置' %></td>
            </tr>
            <tr style="border-bottom: 1px solid #f0f0f0;">
                <td style="padding: 12px 0; font-weight: 600; color: #666;">额度类型</td>
                <td style="padding: 12px 0; color: #333;"><%= question.quota ? question.quota.quota_type : '未知' %></td>
            </tr>
            <tr style="border-bottom: 1px solid #f0f0f0;">
                <td style="padding: 12px 0; font-weight: 600; color: #666;">创建时间</td>
                <td style="padding: 12px 0; color: #333;"><%= new Date(question.created_at).toLocaleString('zh-CN') %></td>
            </tr>
            <tr style="border-bottom: 1px solid #f0f0f0;">
                <td style="padding: 12px 0; font-weight: 600; color: #666;">更新时间</td>
                <td style="padding: 12px 0; color: #333;"><%= new Date(question.updated_at).toLocaleString('zh-CN') %></td>
            </tr>
            <tr>
                <td style="padding: 12px 0; font-weight: 600; color: #666;">状态</td>
                <td style="padding: 12px 0;">
                    <span class="tag tag-<%= getStatusType(question.status) %>">
                        <%= getStatusText(question.status) %>
                    </span>
                </td>
            </tr>
        </table>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        .card div[style*="display: flex"] {
            flex-direction: column !important;
            text-align: center;
        }
        
        .card h1 {
            font-size: 24px !important;
        }
        
        table td:first-child {
            width: 100px !important;
        }
    }
</style>

<%
function getStatusType(status) {
    switch (status) {
        case 'pending': return 'warning';
        case 'answered': return 'success';
        case 'failed': return 'error';
        default: return 'primary';
    }
}

function getStatusText(status) {
    switch (status) {
        case 'pending': return '处理中';
        case 'answered': return '已回答';
        case 'failed': return '回答失败';
        default: return '未知状态';
    }
}

function getRatingText(rating) {
    const ratingTexts = {
        1: '很不满意',
        2: '不满意', 
        3: '一般',
        4: '满意',
        5: '很满意'
    };
    return `${rating}分 (${ratingTexts[rating] || '未知'})`;
}
%>
